<template>
    <div class='bgff h100 pd pt10 sdfgdsytryty'>
        <p class="title-label">
            <span v-if="!sh">添加</span>
            供应商

            <span v-if="sh" class="ml20">
                审核状态:
                <span v-if="shekjr == 1">待审核</span>
                <span v-if="shekjr == 2" class="ls">审核通过</span>
                <span v-if="shekjr == 3" class="z9">审核不通过</span>
            </span>

        </p>
        <div :class="sh ? 'dsfsdtrytrt' : ''">
            <div class="context-page-case mt20 ">
                <n-form :model="form" :rules="rules" ref="formRef" label-width="140" :inline="false" size="normal"
                    label-placement="left">
                    <n-grid :cols="24" :x-gap="20" :y-gap="20">

                        <n-form-item-gi label="供应商名称:" path="name" span="24">
                            <n-input v-model:value="form.name" type="text" placeholder="请输入供应商名称" size="medium"
                                clearable></n-input>
                        </n-form-item-gi>
                        <n-form-item-gi label="企业商号:" path="BusinessHouse" span="24">
                            <n-input v-model:value="form.BusinessHouse" type="text" placeholder="请输入企业商号" size="medium"
                                clearable></n-input>
                        </n-form-item-gi>
                        <!-- <n-form-item-gi label="所属区域:" path="OwningRegion" span="12">
                                <n-input v-model:value="form.OwningRegion" type="text" placeholder="请输入所属区域" size="medium"
                                    clearable></n-input>
                            </n-form-item-gi> -->

                        <n-form-item-gi label="所属区域:" span="12" path="provinceId">
                            <div class=" display-flex">
                                <div class="flex-1 mr10">
                                    <n-select v-model:value="form.provinceId" size="medium" :options="optionsa" clearable
                                        filterable @change="prchange" v-if="!isbj" />
                                    <span class="mt5" v-else>
                                        {{ arrxe[form.provinceId] }}
                                        {{ arrxe[form.cityId] }}
                                    </span>
                                </div>
                                <div class="flex-1 ml10" v-if="!isbj">
                                    <n-select v-model:value="form.cityId" size="medium" :options="optionsb" clearable
                                        filterable />
                                </div>
                            </div>
                        </n-form-item-gi>
                        <n-form-item-gi label="供应商属性:" path="SupplierAttribute" span="12">
                            <!-- <n-input v-model:value="form.SupplierAttribute" type="text" placeholder="请输入供应商属性" size="medium"
                                    clearable></n-input> -->
                            <n-select v-model:value="form.SupplierAttribute" size="medium" :options="optionsc" clearable />

                        </n-form-item-gi>

                        <n-form-item-gi label="营业执照:" path="SupplierAttribute" span="12">

                            <div class="logo-context vertical-center pr">
                                <div v-if="form.businessLicense" class="w100 h100 pr dfggtydert">
                                    <img :src="form.businessLicense" class="w100 h100 imgjz" />
                                    <div class="magnifying-glass vertical-center">
                                        <p>
                                            <i class="iconfont dx-sousuo cf fz32 sz sdfsdtrtyt">
                                                <n-image :src="form.businessLicense" class="kjmsertw" />
                                            </i>

                                            <i class="iconfont dx-shuaxin1 cf fz32 sz ml20" @click="photoShowModal = true">

                                            </i>
                                        </p>

                                    </div>
                                </div>

                                <div v-else class="vertical-center dsfdgtrytryde" @click="photoShowModal = true">
                                    点击上传营业执照
                                </div>
                            </div>
                        </n-form-item-gi>

                        <n-form-item-gi label="相关资质:"  span="12">
                            <div class="jjnmjxeerrw">
                                <div class="logo-context vertical-center pr" v-for="(item, idx) in zzlist" :key="idx">
                                    <n-image :src="item" class="w100 h100" />
                                    <i class="iconfont dx-shanchu cf fz40 sdfsdrtrt" @click="delezpewe(idx)"></i>
                                </div>
                                <div class="logo-context vertical-center " @click="photoShowModaler = true">
                                    <span>点击上传相关资质</span>
                                </div>
                            </div>

                        </n-form-item-gi>
                        <n-form-item-gi label="服务范围:" path="scopeServices" span="24" v-if="!isbj">
                            <div>
                                <n-tree-select class="kksdfsdtr" v-model:value="form.scopeServices" multiple checkable
                                    :options="options" :cascade="cascade" key-field="value" :show-path="showPath"
                                    :allow-checking-not-loaded="cascade" :on-load="handleLoad" />

                            </div>
                        </n-form-item-gi>
                        <n-form-item-gi label="紧急联系人:" path="emergencyContact" span="12">
                            <n-input v-model:value="form.emergencyContact" type="text" placeholder="请输入紧急联系人" size="medium"
                                clearable></n-input>
                        </n-form-item-gi>
                        <n-form-item-gi label="紧急联系人电话:" path="emergencyContactphone" span="12">
                            <n-input v-model:value="form.emergencyContactphone" type="text" placeholder="紧急联系人电话"
                                size="medium" clearable></n-input>
                        </n-form-item-gi>


                    </n-grid>
                </n-form>



            </div>

            <p class="title-label mt20">联系人 <span class="ml20 ls sz" @click="addlxr" v-if="!sh">+点击添加联系人</span></p>

            <div class="kkmxertwret pt20">
                <div class="" v-for="(item, idx) in linkman" :key="idx">
                    <!--  -->
                    <n-input v-model:value="item.name" type="text" placeholder="请输入姓名" size="medium" clearable></n-input>

                    <div class="mt10">
                        <span>性别：</span>
                        <n-radio-group v-model:value="item.sex" name="sex" class="">
                            <n-space>
                                <n-radio value="1">
                                    男
                                </n-radio>
                                <n-radio value="2">
                                    女
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </div>
                    <n-input type="text" v-model:value='item.phone' placeholder="请输入联系电话" size="medium" clearable
                        class="mt10"></n-input>

                    <n-input v-model:value='item.sfz' type="text" placeholder="请输入身份证件号码" size="medium" clearable
                        class="mt10"></n-input>
                    <div class="mt10">
                        <span>管理员：</span>
                        <n-radio-group v-model:value="item.principal" name="sex" class="">
                            <n-space>
                                <n-radio value="1">
                                    是
                                </n-radio>
                                <n-radio value="2">
                                    否
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </div>
                    <p class="z9 fz12 mt10 sz" @click="dellxr(idx)" v-if="linkman.length > 1">点击删除此联系人</p>
                </div>
            </div>
        </div>
        <div class=" vertical-center dsfsdttyrt tl">
            <p v-if="!sh">
                <n-button type="primary" size="medium" @click="addForm">保存</n-button>
                <n-button size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </p>
            <p v-else>
                <n-button type="primary" size="medium" @click="shejjhert" v-if="shekjr == 1">审核通过</n-button>
                <n-button type="error" size="medium" @click="photoShowModalsan = true" class="ml20"
                    v-if="shekjr == 1">审核不通过</n-button>
                <n-button size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </p>
        </div>

        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>营业执照</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="xq营业执照"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>相关资质</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="xq相关资质"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>审核原因</div>
            </template>
            <div>
                <n-input v-model:value="AuditRemarks" type="textarea" :autosize='{ minRows: 10 }' placeholder="请输入审核原因"
                    size="medium" clearable @change=""></n-input>

            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="shjhertsr"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { dxget, dxpost, callBack, qurl, dialog } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import { ref } from "vue"
const value = ref()
const options = ref()
const cascade = ref(false)
const showPath = ref()
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const zzlist = ref([])
const formRef = ref()
const cz = qurl()
const isbj = ref(false) //是否为编辑
const sh = ref(cz.sh)
const photoShowModalsan = ref(false)
const AuditRemarks = ref("")
const shekjr = ref()
const optionsa = ref()
const optionsb = ref()
const optionsc = ref()
const arrxe = ref()
const djdjdfsr = ref()
const linkman = ref([
    {
        name: "",
        sex: "1",
        phone: "",
        principal: "1",
        sfz: ""
    }
])
const form = ref({
    name: "",//供应商名称
    BusinessHouse: "", // 企业商号
    provinceId: "", // 所属区域
    cityId: "",
    SupplierAttribute: "", //供应商属性
    businessLicense: "",//营业执照
    scopeServices: "",
    emergencyContact: "", // 紧急联系人
    emergencyContactphone: ""//紧急联系人电话
})
const rules = {
    name: {
        required: true,
        message: '请输入供应商名称',
        trigger: 'blur'
    },
    BusinessHouse: {
        required: true,
        message: '请输入企业商号',
        trigger: 'blur'
    },
    provinceId: {
        required: true,
        message: '请选择所属区域',
        trigger: 'blur'
    },
    SupplierAttribute: {
        required: true,
        message: '请输入供应商属性',
        trigger: 'blur'
    },
    scopeServices: {
        required: true,
        message: '请选择服务范围',
        trigger: 'blur'
    },

    
    emergencyContact: {
        required: true,
        message: '请输入紧急联系人',
        trigger: 'blur'
    },
    emergencyContactphone: {
        required: true,
        message: '请输入紧急联系人电话',
        trigger: 'blur'
    },



}



const handleLoad = async (data) => {
    const res: any = await dxget('public/area', {
        type: 1,
        code: data.value
    });
    data.children = res.data
}

const getArea = async () => {
    const { data }: any = await dxget("public/area")
    options.value = data
}
getArea()


const getarea = async () => {
    const { data }: any = await dxget('public/area')
    optionsa.value = data

}
getarea()

let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    form.value.businessLicense = jjnmnxe;
    photoShowModal.value = false;
};


let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    zzlist.value.push(jjnmnxeer)
    photoShowModaler.value = false;
};
const delezpewe = (idx) => {
    zzlist.value.splice(idx, 1)
}


const addlxr = () => {
    linkman.value.push({
        name: "",
        sex: "1",
        phone: "",
        principal: "1"
    })
}
const dellxr = (idx) => {
    linkman.value.splice(idx, 1)
}

const addForm = (e) => {
    e.preventDefault();
    formRef.value?.validate(async (errors) => {
        if (!errors) {

            if (zzlist.value.length <= 0) {
                window.$message.error("请上传资质图片")
                return
            }

            const ststic = await dialog('确认提交吗?提交后无法修改服务范围')
            if (ststic != 1) {
                return
            }
            form.value["auditStatus"] = 1
            const { errno }: any = await dxpost("xqts/xqsupplierManagement", {
                ...form.value,
                role: localStorage.userNmae,
                certification: zzlist.value.join(","),
                linkmanList: JSON.stringify(linkman.value)
            }, isbj.value ? 'put' : "post")
            if (errno == 0) {
                window.$message.success("提交成功！请等待审核")
                callBack()
            }
        }
    })

}

const getcyyxconfig = async () => {
    const { data }: any = await dxget('xqts/getarea')
    arrxe.value = data
}
const initGetdata = async () => {
    await getcyyxconfig()
    const { data }: any = await dxget("xqts/xqsupplierManagement", {
        id: cz.id
    })
    zzlist.value = data.certification.split(",")
    linkman.value = JSON.parse(data.linkmanList)
    form.value = data
    shekjr.value = data.auditStatus



}
if (cz.id) {
    isbj.value = true

    initGetdata()
}

const shejjhert = async () => {
    const { errno }: any = await dxpost("xqts/xqsupplierManagement", {
        id: cz.id,
        auditStatus: 2
    }, "put")
    if (errno == 0) {
        window.$message.success("审核通过")
        callBack()
    }
}


const shjhertsr = async () => {
    const { errno } = await dxpost("xqts/xqsupplierManagement", {
        id: cz.id,
        auditStatus: 3,
        AuditRemarks: AuditRemarks.value
    }, "put")
    if (errno == 0) {
        window.$message.success("操作成功！")
        callBack()
    }
}



const getzdise = async () => {
    const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'SupplierAttribute' })
    optionsc.value = data
}
getzdise()



const getgyswrertw = async () => {
    const { data }: any = await dxget("xqts/RegionalSupplier/getgys")
    djdjdfsr.value = data
}
const prchange = async (d) => {
    form.value.cityId = ""
    const { data }: any = await dxget('public/area', {
        type: 1,
        code: d
    })
    optionsb.value = data
}
const jhnbkse = (data) => {
    return djdjdfsr.value.filter(a => a.value == data)[0].label
}




</script>
<style scoped></style>